import ReactDOM from 'react-dom'
import { useState, useRef, useEffect } from 'react'

const App = () => {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')
  const countRef = useRef(count)
  // 每次count值改变，就把最新的值赋给countRef.current
  // 这个相当于vue的watch函数
  // 并且更新countRef.current不会触发组件的更新
  useEffect(() => {
    countRef.current = count
  }, [count])
  // 点击3秒后显示的按钮，代码就会记录当时count的值
  // 然后疯狂点击加一的按钮，count的值会不断增加
  // 使用countRef就可以获取到count的最新值
  // 但是count拿到的count还是原来的值
  const showCount = () => {
    setTimeout(() => {
      console.log('展示count值： ', count)
      console.log('展示count最新值： ', countRef.current)
    }, 3000)
  }
  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>
      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={showCount}>点击按钮3秒后显示count</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
